<template>
  <div>
    <div class="top">
        <h3>{{ data.goodslist.title }}</h3>
        <p>{{ data.goodslist.description }}</p>
        <div  class="item" v-for="item,i in data.goodspage" :key="i">
            <h5>{{ item.title }}</h5>
            <div>
                <img v-if="item.image" :src="item.image.url" alt="">
                <p>{{ item.description }}</p>
                 <span>{{ item.excerpt }}</span>
            </div>
            <p>{{ item.createdAt }}</p>
        </div>
    </div>
  </div>
</template>

<script lang='ts'  setup>
import {getzlgoods,getidList} from "../utlis/api"
import {ref, reactive, toRefs} from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data:any=reactive({
    goodslist:[],
    params:{
        page:1,
        size:10
    },
    goodspage:[],
    url:"",
    id:route.query.id
})
const id=store.state.column
 const goodsdata= ()=>{
    getzlgoods(id).then(res=>{
        console.log(19,res);
        data.goodslist=res.data
    })

}
goodsdata()
const goodspage=()=>{
    getidList(data.params,id).then(res=>{
      console.log(45,res);
      data.goodspage=res.data.list
    })
}
goodspage()
</script>

<style scoped lang='scss'>
.top{
    width: 1000px;
    margin: auto;
}
.item{
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
   >div{
    display: flex;
    img{
        width: 200px;
        height: 100px;
    }
   }
}
</style>